<template>
	<view class="ccic-loading">
		<div class="hollow-dots-spinner" :style="spinnerStyle">
			<div class="dot"></div>
			<div class="dot"></div>
			<div class="dot"></div>
		</div>
	</view>
</template>

<script>
	export default {
		name: "ccic-loading",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.ccic-loading {
		width: 100%;
		
		margin-bottom: 42rpx;

		display: flex;
		align-items: center;
		justify-content: center;

		.hollow-dots-spinner,
		.hollow-dots-spinner {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.hollow-dots-spinner {
			height: 15rpx;
			width: calc(80rpx * 3);
		}

		.hollow-dots-spinner .dot {
			width: 20rpx;
			height: 20rpx;
			margin: 0 calc(15px / 2);
			border: calc(15px / 5) solid;
			// border-image: -webkit-linear-gradient(to bottom right, red, yellow);
			// border-image: -moz-linear-gradient(to bottom right, red, yellow);
			border-image-source: linear-gradient(to bottom right, #6bb8ff, #e0eaff, #72e1ff);
			border-image-slice: 1;
			border-radius: 50% !important;
			float: left;
			transform: scale(0);
			opacity: 1;
			animation: hollow-dots-spinner-animation 1000ms ease infinite 0ms;
		}

		.hollow-dots-spinner .dot:nth-child(1) {
			animation-delay: calc(220ms * 1);
		}

		.hollow-dots-spinner .dot:nth-child(2) {
			animation-delay: calc(220ms * 2);
		}

		.hollow-dots-spinner .dot:nth-child(3) {
			animation-delay: calc(220ms * 3);

		}

		@keyframes hollow-dots-spinner-animation {
			50% {
				transform: scale(1);
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}
	}
</style>
